/*
* @Date: 2019-08-22 09:13:08
* @Last Modified time: 2019-08-22 09:13:08
* @Content:快速定位包括里程定位和车站定位
*/
<template>
  <div class="quickLocation">
    <el-breadcrumb class="app-breadcrumb" separator="/">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item,index) in levelList" :key="index">
          <!-- <span v-if="index==levelList.length - 1" class="no-redirect">{{ item.properties.NAME }}</span> -->
          <span  @click.prevent="handleLink(item)" class="no-redirect">{{ item.properties.NAME }}</span>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
    <div>
      <el-row v-for="row in rows" :key="row.id">
        <el-col :span="8" v-for="s in row.data" :key="s.id">
          <div @click="onSymbolSelected(s)" class="card">
            <span>{{s.properties.NAME}}</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { qxjList } from "@/api/poi";
import {mapState} from "vuex";
import BoxUtil from '@/assets/js/utils/BoxUtil'
export default {
  data() {
    return {
      levelList: [],
      symbols: [],
      allQxj: []
    };
  },
  methods: {
    handleLink(item) {

      const index = this.levelList.indexOf(item);
      this.levelList.splice(index + 1, this.levelList.length - 1);
      this.symbols = this.allQxj.filter(a=>a.properties.PID === item.properties.CLASID);
    },
    //定位  高亮
    onSymbolSelected(item){
      const filter = this.allQxj.filter(a=>a.properties.PID === item.properties.CLASID);
      if(filter.length == 0){
        return;
      }
     this.levelList.push(item);
     this.symbols = this.allQxj.filter(a=>a.properties.PID === item.properties.CLASID);
    },

    /**
     * 设置高亮
     */
    setHighLightResult(item){
    }
  },
  mounted: function() {
    qxjList().then(res => {
      //显示列表
      const data = res.data;
      this.allQxj = data;
      this.levelList = this.allQxj.filter(a=>a.properties.PID === '0');
      this.symbols = this.allQxj.filter(a=>a.properties.PID === this.levelList[0].properties.CLASID);
    });
    //清除区县界
    this.bus.$on('map.qxj.clear',this.setHighLightResult)
  },
  computed: {
   ...mapState({
     mapService(state) {
        return state.sjwh.mapService;
      }
   }),

    rows() {
      let rows = [];
      if (!this.symbols) {
        return rows;
      }
      let row = Math.ceil(this.symbols.length / 3);
      for (var i = 0; i < row; i++) {
        let start = i * 3;
        let end = (i + 1) * 3;
        rows.push({
          id: i,
          data: this.symbols.slice(
            start,
            end > this.symbols.length ? this.symbols.length : end
          )
        });
      }
      return rows;
    }
  },
  beforeDestroy(){
    this.bus.$off('map.qxj.clear',this.setHighLightResult);
  }
};
</script>

<style>
.quickLocation {
  position: relative;
  height: 100%;
  z-index: 999;
  margin-top: -12px;
  font-size: 0.8em;
}

.quickLocation .quickLocationTab {
  line-height: 30px;
}

.quickLocation .quickLocationTabActivate {
  color: #398f86ff;
}

.quickLocation .el-input__inner {
  border-radius: 0em;
  background-color: #00000000;
 
  height: 30px;
  
}

.quickLocation .el-select-dropdown__item.hover {
  background-color: #fff0;
}

.quickLocation .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #0003;
}

.quickLocation .grid-content {
  border-radius: 0px;
  min-height: 36px;
  text-align: center;
}

.quickLocation .el-form-item {
  margin-bottom: 5px;
}

.quickLocation .el-button + .el-button {
  margin-left: 100px;
}

.quickLocation .el-button {
  padding: 5px 20px;
  border-radius: 0px;
  background-color: #fff0;
 
  margin-bottom: 1em;
}



.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 20px;
  margin-left: 10px;

}

.app-breadcrumb.el-breadcrumb .no-redirect {
 
  cursor: pointer;

}
</style>


</style>


